<template>
  <div>
    <button class="btn btn-sm btn-primary" @click="addItem">添加新股</button>
    <vue-config v-ref:new-share-config></vue-config>
  </div>
  <br>
  <div class="form-inline">
    <div class="form-group form-group-sm">
      股票代码：<input type="text" class="form-control" v-model="filter.code">
    </div>
    <div class="form-group form-group-sm">
      截止时间：
      <vue-date-picker
        :time.sync="filter.endTime"
        :option="datePickerOption">
      </vue-date-picker>
    </div>
    <div class="form-group form-group-sm">
      上市时间：
      <vue-date-picker
        :time.sync="filter.listedDate"
        :option="datePickerOption">
      </vue-date-picker>
    </div>
    <button class="btn btn-sm btn-primary" @click="search">搜索</button>
    <button class="btn btn-sm btn-primary" @click="clear">清空搜索条件</button>
  </div>
  <table v-show="list && list.length > 0" class="table table-bordered">
    <caption>新股列表</caption>
    <thead>
      <tr>
        <th class="col-xs-1" rowspan="5">股票</th>
        <th class="col-xs-4" colspan="4">认购信息</th>
        <th class="col-xs-3" rowspan="5" colspan="2">观点</th>
        <th class="text-center" rowspan="5">状态</th>
        <th class="text-right" rowspan="5">排序</th>
        <th rowspan="5"></th>
      </tr>
    </thead>
    <tbody>
      <template v-for="it in list">
        <tr>
          <td rowspan="5">{{it.name}}</td>
          <td class="col-nowrap text-right">股票代码</td>
          <td class="col-nowrap">{{it.code || '待定'}}</td>
          <td class="col-nowrap text-right">入场费</td>
          <td>{{it.gateMoney && +it.gateMoney > 0 ? it.gateMoney : '待定'}}</td>
          <td class="col-nowrap text-right">标题</td>
          <td>{{it.title}}</td>
          <td rowspan="5" class="col-nowrap text-center">{{ +it.status === 1 ? '上架' : '下架' }}</td>
          <td rowspan="5" class="text-right col-nowrap">
            <button v-if="$index !==0 " class="btn btn-sm btn-success btn-move" @click="swap(it.id, list[$index - 1].id)">上移</button>
            <button v-if="$index !== (list.length-1)" class="btn btn-sm btn-success btn-move" @click="swap(it.id, list[$index + 1].id)">下移</button>
            <button class="btn btn-sm btn-move" v-if=" $index >= list.length - 1 " :style="{ opacity: 0, 'pointer-events': 'none' }">占位</button>
          </td>
          <td rowspan="5" class="col-nowrap text-right">
            <button class="btn btn-sm btn-primary" @click="updateItemStatus(it.id, +it.status === 1 ? 0 : 1)">{{ +it.status === 1 ? '下架' : '上架' }}</button>
            <button class="btn btn-sm btn-primary" @click="updateItem(it)">修改</button>
            <button class="btn btn-sm btn-danger" @click="updateItemStatus(it.id, 2)">删除</button>
          </td>
        </tr>
        <tr>
          <td class="col-nowrap text-right">认购价</td>
          <td>{{it.price ? it.price : '待定'}}</td>
          <td class="col-nowrap text-right">每手股数</td>
          <td>{{it.num && +it.num > 0 ? it.num : '待定'}}</td>
          <td class="col-nowrap text-right" rowspan="3">内容</td>
          <td rowspan="3">{{it.descr}}</td>
        </tr>
        <tr>
          <td class="col-nowrap text-right">截止时间</td>
          <td>{{it.endTime || '待定'}}</td>
          <td class="col-nowrap text-right">上市时间</td>
          <td>{{it.listedDate || '待定'}}</td>
        </tr>
        <tr>
          <td class="col-nowrap text-right">上市价 </td>
          <td class="col-nowrap">{{it.listingPrice || '待定'}}</td>
          <td class="col-nowrap text-right">搜索链接</td>
          <td >{{it.url}}</td>
        </tr>
        <tr>
          <td class="col-nowrap text-right">扣费时间</td>
          <td class="col-nowrap">{{it.deductMoneyTime}}</td>
          <td class="col-nowrap text-right">可选择的股数和金额 </td>
          <td>{{it.selectedSharesSpend}}</td>
          <td>是否推荐</td>
          <td v-if="+it.isRecommend ===0">不推荐</td>
          <td v-if="+it.isRecommend ===1">推荐新股</td>
        </tr>
      </template>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
</template>
<style src="./new-shares-list.css" scoped></style>
<script src="./new-shares-list.js"></script>